<template>
  <!-- 热卖爆款 -->
  <div class="hot-sale-wrap">
    <div class="title-wrap" v-if="ruleFormLocal.styleTypeTitle == 0">
      <div class="left-title">
        <div class="h1">
          <span>
            热卖爆款
          </span>
        </div>
        <div class="tag">
          海量货源 专享价格
        </div>
      </div>
      <div class="all">
        查看全部 >
      </div>
    </div>
     <!-- 热卖爆款 标题2一-->
    <div class="like-header-2" v-if="ruleFormLocal.styleTypeTitle == 1">
      <div class="left-header">
        <i class="line first"></i>
        <i class="left-radius" style="background: #d5dfff;"></i>
        <i class="left-radius"></i>
        <div class="h1">热卖爆款</div>
        <i class="right-radius"></i>
        <i class="right-radius" style="background: #d5dfff;"></i>
        <i class="line last"></i>
      </div>
    </div>
    <div class="ho-sale-componet">
      <!-- 动态组件 -->
      <hot-sale-style1 v-if="ruleFormLocal.listStyle == 0"></hot-sale-style1>
      <hot-sale-style2 v-if="ruleFormLocal.listStyle == 1"></hot-sale-style2>
    </div>
     <option-right v-if="dateFactory.activeBorder">
      <div class="option-wrap">
        <el-form :model="ruleFormLocal" label-width="100px">
          <div class="edit-componet-title">
            商品
          </div>
          <el-form-item label="标题样式" prop="styleTypeTitle">
            <el-radio-group v-model="ruleFormLocal.styleTypeTitle">
              <el-radio :label="0">类型1</el-radio>
                <el-radio :label="1">类型2</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="列表样式" prop="listStyle">
            <el-radio-group v-model="ruleFormLocal.listStyle">
              <el-radio :label="0">滑动</el-radio>
              <el-radio :label="1">一大两小</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </option-right>
  </div>
</template>

<script>
import HotSaleStyle1 from './HotSaleStyle1';
import HotSaleStyle2 from './HotSaleStyle2';
export default {
  name: 'HotSale',
  props: {
    dateFactory: Object,
  },
  data() {
    return {
      ruleFormLocal:this.dateFactory.ruleForm,
    }
  },
  components: {
    HotSaleStyle1,
     HotSaleStyle2,
  },
  computed: {
    
  },
  watch: {
    ruleFormLocal: {
      handler: function (newValue) {
        console.log(newValue, 'newValuenewValuenewValue')
        
        this.diyData[this.index].ruleForm = newValue
        this.$EventBus.$emit('diyFactory', this.diyData)
      },
      deep: true,
    }
  },
  mounted() {
    
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
  // 热卖爆款
	.hot-sale-wrap {
    padding: 21px 9px;
    background: #fff;
    padding-top: 0;
		.title-wrap {
			display: flex;
			align-items: center;
      justify-content: space-between;
      height: 60px;
			.left-title {
				display: flex;
        align-items: baseline;
        height: 44px;
				.h1 {
					font-size: 15px;
					color: #000;
					font-weight: 700;
          margin-right: 6px;
          span {
            position: relative;
            z-index: 10;
          }
					&::before {
						content: '';
						display: block;
						position: relative;
						width: 62px;
						height: 10px;
						bottom: -20px;
						background: linear-gradient(to right,#fed188,#f6845b);
					}
				}
				.tag {
					font-size: 12px;
					color: #868686;
				}
			}
			.all {
				font-size: 12px;
				color: #f6845b;
			}
		}
  }
  .option-wrap {
    .el-form  {
      .edit-componet-title {
        margin-bottom: 15px;
        padding-bottom: 7px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
      }
      .el-form-item {
        .side {
          display: flex;
          align-items: center;
          align-items: center;
          .el-slider {
            flex: 1;
          }
          &> span {
            margin-left: 14px;
          }
        }
      }
    }
  }
   // 猜你喜欢标题二
  .like-header-2 {
    height: 60px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .left-header {
      display: flex;
      align-items: center;
      .line {
        width: 25px;
        height: 1px;
        background: #295cf2;
        &.first {
          margin-right: 8px;
        }
        &.last {
          margin-left: 8px;
        }
      }
      .left-radius ,.right-radius{
        width: 4px;
        height: 13px;
        border-radius: 4px;
        background: #295cf2;
      }
      .left-radius {
        transform: rotateZ(45deg);
        margin-right: 6px;
      }
      .right-radius {
        transform: rotateZ(135deg);
        margin-left: 6px;
      }
      .h1 {
        color: #000000;
        font-size: 15px;
        font-weight: 900;
        margin: 0 10px;
      }
    }
  }
  
</style>